var mychart1 =echarts.init(document.getElementById('charts1'));     //圆形
var mychart2 =echarts.init(document.getElementById('charts'));         //下方


var dataMap = {};
function dataFormatter(obj,pList,years) {
    var temp;
    for (var j = 0; j < years.length; j++) {
        var max = 0;
        var sum = 0;
        temp = obj[years[j]];
        for (var i = 0, l = temp.length; i < l; i++) {
            max = Math.max(max, temp[i]);
            sum += temp[i];
            obj[years[j]][i] = {
                name : pList[i],
                value : temp[i]
            }
        }
        obj[years[j] + 'max'] = Math.floor(max / 100) * 100;
        obj[years[j] + 'sum'] = sum;
    }
    return obj;
}

var option1;
var option2 = {
    title: {
        text: '区域事件处理量',
        textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color:'#fff',
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: function(params, ticket, callback) {
            var res = params.seriesName;
            res += '<br/>' + params.name + ' : ' + params.percent + '%';
            return res;
        }
    },
    legend: {
        orient: 'vertical',
        right: '0%',
        bottom: '2%',
        data: ['上报率', '处理率', '结案率', '发生率'],
        textStyle:{
          color:'#fff'
        },
        itemWidth: 20,
        itemHeight: 10,
        color:['#00b0ff','#7052f4','#4CC76D','#96d668','#7049f0','#3ea1ff','#00feff'],
    },
    series: [
        {
        name:'事件',
        type: 'pie',
        selectedMode: 'single',
        radius: ['30%', '65%'],
        label: {
            normal: {
                position: 'outside',
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        data: [
            {
            value: 11,
            name: '发生率',
            itemStyle: {
                normal: {
                    color: '#00b0ff'
                }
            }
        },
            {
            value: 22,
            name: '受理率',
            itemStyle: {
                normal: {
                    color: '#7052f4'
                }
            }
        },
            {
            value: 33,
            name: '结案率',
            itemStyle: {
                normal: {
                    color:'#027eff'
                }
            }
        }]
    }]
};



mychart2.setOption(option2);



function countNumer(){
    var options = {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
    };
    var options1 = {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        suffix:'%'
    };
    count_number1 = new CountUp('count-number1', 0, 0, 0, 1.5, options);
    count_number2 = new CountUp('count-number2', 0, 0, 0, 1.5, options);
    count_number3 = new CountUp('count-number3', 0, 0, 0, 1.5, options);
    count_number4 = new CountUp('count-number4', 0, 0, 0, 1.5, options);

    count_number5 = new CountUp('count-number5', 0, 0, 0, 1.5, options1);
    /*count_number6 = new CountUp('count-number6', 0, 0, 0, 1.5, options1);
    count_number7 = new CountUp('count-number7', 0, 0, 0, 1.5, options1);*/
    count_number8 = new CountUp('count-number8', 0, 0, 0, 1.5, options1);

    count_number1.start();
    count_number2.start();
    count_number3.start();
    count_number4.start();
    count_number5.start();
   /* count_number6.start();
    count_number7.start();*/
    count_number8.start();

}

$(window).ready(function () {

    var id = 1;
    $(".table-position .layui-card-body ul li a").click(function () {
        id = $(this).attr("data-id");
        $.getJSON("/ajax/ShowAjax/region_number","id="+id,function (data) {
            count_number1.update(data.report_default);
            count_number2.update(data.report_accept);
            count_number3.update(data.report_over);
            count_number4.update(data.report_all);
        });
    });

    $.getJSON("/ajax/ShowAjax/region_number","id="+id,function (value) {

            var towns = [];
            value.towns.forEach(function (data,i) {
                if(i%2 != 0){
                    towns.push("\n"+data.townName);
                }
               towns.push(data.townName);
            });

            var send={},accept={},over={};
            value.years.forEach(function (data) {
                send[data] = [];
                accept[data] = [];
                over[data] = [];
              value.towns.forEach(function (item) {
                 var num = value.all[data][item.townName];
                  send[data].push(num[0]);
                  accept[data].push(num[1]);
                  over[data].push(num[2]);
              });
            });
            console.log(value.years.length);
            dataMap.send = dataFormatter(send,towns,value.years);
            dataMap.accept = dataFormatter(accept,towns,value.years);
            dataMap.over = dataFormatter(over,towns,value.years);

        var options = [];
        value.years.forEach(function (data) {
            options.push({
                title: {text: data+'全县事件指标'},
                series: [
                    {data: dataMap.send[data]},
                    {data: dataMap.accept[data]},
                    {data: dataMap.over[data]},
                    {data: [
                            {name: '事件上报数', value: dataMap.send[data+'sum']},
                            {name: '事件处理数', value: dataMap.accept[data+'sum']},
                            {name: '事件结案数', value: dataMap.over[data+'sum']}
                        ]}
                ]
            })
        });

        option1 = {
            baseOption: {
                timeline: {
                    // y: 0,
                    axisType: 'category',
                    // realtime: false,
                    // loop: false,
                    autoPlay: true,
                    // currentIndex: 2,
                    playInterval: 1000,
                    // controlStyle: {
                    //     position: 'left'
                    // },
                    data: value.years,
                    lineStyle:{
                        color:'#00feff'
                    },
                    label: {
                        color:'#fff',
                        formatter : function(s) {
                            return (new Date(s)).getFullYear();
                        }
                    }
                },
                title: {
                    subtext: '数据来自国家统计局',
                    textStyle:{
                        color:'#fff'
                    }
                },
                tooltip: {
                },
                legend: {
                    x: 'right',
                    textStyle:{
                        color:'#fff',
                    },
                    data: ['事件上报数', '事件处理数', '事件结案数'],
                    selected: {
                        '总事件数': false, '总上报数': false, '总结案数': false
                    }
                },
                calculable : true,
                grid: {
                    top: 80,
                    bottom: 100,
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            label: {
                                show: true,
                                formatter: function (params) {
                                    return params.value.replace('\n', '');
                                }
                            }
                        }
                    }
                },
                xAxis: [{
                    'type':'category',
                    'axisLabel':{'interval':0},
                    'data':towns,
                    axisLine:{
                        lineStyle:{
                            color:'#aaa',
                        }
                    },
                    splitLine: {show: false}
                }],
                yAxis: [
                    {
                        type: 'value',
                        name: '总事件数',
                        axisLine:{
                            lineStyle:{
                                color:'#fff',
                            }
                        }
                    }
                ],
                series: [
                    {name: '总事件数', type: 'bar'},
                    {name: '总上报数', type: 'bar'},
                    {name: '总结案数', type: 'bar'},
                    {name: '事件上报数', type: 'bar'},
                    {name: '事件处理数', type: 'bar'},
                    {name: '事件结案数', type: 'bar'},
                    {
                        name: '事件占比',
                        type: 'pie',
                        center: ['75%', '35%'],
                        radius: '28%',
                        z: 100
                    }
                ]
            },
            options:options
        };
        mychart1.setOption(option1);
    });


    //更新圆中的数据
    var num = 100;
    countNumer();
    setInterval(function () {

        $.getJSON("/ajax/ShowAjax/region_number","id="+id,function (data) {
            count_number1.update(data.report_default);
            count_number2.update(data.report_accept);
            count_number3.update(data.report_over);
            count_number4.update(data.report_all);

            count_number5.update((data.report_accept/(data.report_default*1.0))*100);
          /*  count_number6.update((num+20)%100);
            count_number7.update(num%100);*/
            count_number8.update((data.report_default/(data.report_all*1.0))*100);


           var option=  mychart1.getOption();
            option.series[0].data[0].value = data.report_default;
            option.series[0].data[1].value = data.report_accept;
            option.series[0].data[2].value = data.report_over;
            mychart1.setOption(option);

            option = mychart2.getOption();
            option.series[0].data[0].value = data.report_default;
            option.series[0].data[1].value = data.report_accept;
            option.series[0].data[2].value = data.report_over;
            mychart2.setOption(option);
            
        });

    },9000);


});

$(window).resize(function(){
    mychart1.resize();
    mychart2.resize();
});
